<template>
  <view class="page-header">
    <!-- 状态栏占位 -->
    <view class="status-bar"></view>

    <!-- 导航栏主体 -->
    <view class="header-container">
      <!-- 左侧区域 - 默认返回按钮，可自定义 -->
      <view class="header-left">
        <slot name="left">
          <view v-if="showBack" class="back-button" @click="goBack">
            <image class="icon-svg" src="/static/svgs/back.svg"></image>
          </view>
        </slot>
      </view>

      <!-- 中间标题区域 -->
      <view class="header-title">
        <slot name="center">
          <slot name="title">
            <text class="title-text">{{ title }}</text>
          </slot>
        </slot>
      </view>

      <!-- 右侧区域 - 可自定义 -->
      <view class="header-right">
        <slot name="right"></slot>
      </view>
    </view>

    <!-- 占位元素，防止内容被固定导航栏遮挡 -->
    <view class="header-placeholder"></view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";

// 定义组件的属性
const props = defineProps({
  title: {
    type: String,
    default: "标题",
  },
  showBack: {
    type: Boolean,
    default: true,
  },
  customBack: {
    type: Function,
    default: null,
  },
});

// 定义事件
const emit = defineEmits(["back"]);

// 返回上一页的方法
const goBack = () => {
  // 如果有自定义返回方法，则调用自定义方法
  if (props.customBack) {
    props.customBack();
    return;
  }

  // 触发back事件，让父组件可以监听
  emit("back");

  // 默认返回行为
  const pages = getCurrentPages();
  if (pages.length > 1) {
    // 如果有上一页，则直接返回
    uni.navigateBack({
      delta: 1,
    });
  } else {
    // 没有上一页，则回到首页
    uni.reLaunch({
      url: "/pages/index/index",
      fail: (err) => {
        console.error("返回首页失败:", err);
        // 如果reLaunch失败，尝试使用redirectTo
        uni.redirectTo({
          url: "/pages/index/index",
        });
      },
    });
  }
};
</script>

<style>
/* 顶部导航样式 */
.page-header {
  width: 100%;
}

.status-bar {
  width: 100%;
  height: var(--status-bar-height);
  background-color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #f0f0f0;
  padding: 0;
  position: fixed;
  top: var(--status-bar-height);
  left: 0;
  right: 0;
  z-index: 900;
}

.header-placeholder {
  width: 100%;
  height: calc(var(--status-bar-height) + 90rpx);
}

.header-left,
.header-right {
  min-width: 100rpx;
  display: flex;
  align-items: center;
}

.header-left {
  justify-content: flex-start;
  padding-left: 10rpx;
}

.header-right {
  justify-content: flex-end;
  padding-right: 10rpx;
}

.header-title {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.title-text {
  font-size: 36rpx;
  font-weight: 600;
  color: #333333;
}

.back-button {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-svg {
  width: 44rpx;
  height: 44rpx;
  color: #333333;
}
</style>
